<template>
    <view>
        <u-popup v-model="show" mode="bottom" round="44rpx" border-radius="20" :closeable="true" @close="onClose">
            <view class="popupBox">
                <view class="h2 bold">获取您的昵称、头像</view>
                <view class="h3">获取用户头像、昵称，主要用于向用户提供具有辨识度的用户中心界面</view>
                <view class="form">
                    <view class="input u-flex">
                        <view class="h2">头像</view>
                        <view class="info">
                            <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
                                <image class="avatar" :src="avatarUrl" mode="widthFix"></image>
                            </button>
                        </view>
                        <u-icon name="arrow-right" size="32rpx" color="#999"></u-icon>
                    </view>
                    <view class="input u-flex">
                        <view class="h2">昵称</view>
                        <view class="info">
                            <input type="nickname" v-module="nickName" placeholder="请输入昵称" @blur="onBlur" />
                        </view>
                    </view>
                </view>
                <view class="submit" :style="{background:PrimaryColor}" @click="submit">确定</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import {
    uploadImg
} from "@/api/setting/userInfo"
import {
    authMiniLogin
} from "@/api/login.js"
export default {
    computed: {
        ...mapState({
            showWxLogin: state => state.user.showWxLogin,
            tel: state => state.user.tel
        }),
        show: {
            get() { return this.showWxLogin },
            set(val) { }
        }
    },
    data() {
        return {
            PrimaryColor: '#1fba1a', //主题色
            data: uni.getStorageSync('authorList'),
            $imgUrl: this.$imgUrl,
            avatarUrl: "https://yl.weilankangyang.com/static/mini_program/head.png",
            photo: ''
        }
    },
    watch: {
        "showWxLogin": {
            handler(val) {
                console.log(val, "val")
                if (val) {
                    this.getUserInfo()
                }
            }
        }
    },
    created() {

    },
    methods: {
        getUserInfo() {
            uni.login({
                provider: 'weixin',
                success: function (loginRes) {
                    // 获取用户信息
                    uni.getUserInfo({
                        provider: 'weixin',
                        success: function (infoRes) {
                            this.data = {
                                ...infoRes.userInfo,
                                ...{
                                    code: loginRes.code
                                }
                            }
                            console.log(this.data)
                        }
                    });
                }
            });
        },
        ...mapMutations(['setShowWxLogin', 'setUserInfo']),
        onClose() {
            this.setShowWxLogin(false);
        },
        onChooseAvatar(e) {
            console.log(e)
            this.avatarUrl = e.detail.avatarUrl
            //该图片需要上传到自己服务器--此处没做处理
            uploadImg(e.detail.avatarUrl).then((res) => {
                // console.log(res.data[0].fileurl, "res.data[0].fileurl")
                // this.avatarUrl = res.data[0].fileurl
                this.photo = res.data[0].fileurl
            })
        },
        onBlur(e) {
            console.log(e)
            this.nickName = e.detail.value
        },
        submit() {
            // uni.showToast({
            //     title: "tel:" + this.tel + "," + "mobile:" + uni.getStorageSync('mobile'),
            //     icon: 'none',
            //     duration: 100000
            // });
            if (!this.photo) {
                uni.showToast({
                    title: '请上传头像~',
                    icon: 'none'
                });
                return
            }
            if (!this.nickName) {
                uni.showToast({
                    title: '请输入昵称~',
                    icon: 'none'
                });
                return
            }
            uni.login({
                success: (res) => {
                    console.log(this.tel, "this.tel")
                    let mobile = this.tel ? this.tel : uni.getStorageSync('mobile')
                    console.log(mobile, "mobile")
                    let httpData = {
                        code: res.code,
                        avatar: this.photo,
                        nicename: this.nickName,
                        mobile: mobile,
                        invite_code: uni.getStorageSync('invite')
                    };
                    // uni.showToast({
                    //     title: "mobile:" + httpData.mobile,
                    //     icon: 'none',
                    //     duration: 2000000
                    // });
                    if (httpData.mobile) {
                        authMiniLogin(httpData).then(ress => {
                            if (ress.code == 1) {
                                uni.setStorageSync('token', ress.data.token)
                                uni.setStorageSync('invite_code', ress.data.invite_code)
                                uni.setStorageSync('huanxin', JSON.stringify(ress.data.huanxin))
                                uni.showToast({
                                    title: ress.info,
                                    icon: 'none'
                                });
                                this.onClose();
                                if (ress.data.busin_id) {
                                    uni.setStorageSync('busin_id', ress.data.busin_id)
                                    setTimeout(() => {
                                        uni.reLaunch({
                                            url: '/pages/my/my'
                                        })
                                    }, 500)
                                } else {
                                    setTimeout(() => {
                                        uni.navigateTo({
                                            url: '/pagesA/login/register'
                                        })
                                    }, 500)
                                }
                            }
                        })
                    }
                }
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.popupBox {
  width: 100%;
  padding: 50rpx 40rpx 30rpx;
  .h2 {
    color: #333;
    font-size: 32rpx;
  }
  .h3 {
    font-size: 26rpx;
    color: #999;
    line-height: 1.4;
    padding-top: 14rpx;
  }
  .bold {
    font-weight: bold;
  }
  .form {
    margin-top: 30rpx;
    border-top: 1px solid #efefef;
    .input {
      padding: 24rpx 0;
      border-bottom: 1px solid #efefef;
      .info {
        // width: 100%;
        flex: 1;
        margin-left: 30rpx;
        .avatar-wrapper {
          line-height: 80rpx;
          height: auto;
          width: auto;
          margin: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 10rpx;
          .avatar {
            width: 60rpx;
            height: 60rpx;
            border-radius: 50%;
          }
        }
        input {
          background: transparent;
          width: 100%;
          height: 70rpx;
          color: #333;
          font-size: 30rpx;
        }
      }
    }
  }
}

.submit {
  margin-top: 30rpx;
  width: 100%;
  height: 92rpx;
  border-radius: 10rpx;
  text-align: center;
  line-height: 92rpx;
  color: #fff;
  font-size: 32rpx;
  background: #e83f3c;
}
</style>